<template>
	<el-row :gutter="20">
		<el-col :span="25">
			<el-card>
				<el-row>
					<el-col :span="20">
						<el-statistic :value="1000">
							<template #title>
								<div style="display: inline-flex; align-items: center">
									在职员工
									<el-icon style="margin-left: 4px" :size="12">
										<Male />
									</el-icon>
								</div>
							</template>
							<template #suffix> </template>
						</el-statistic>
					</el-col>
					<el-col :span="4" class="ico">
						<svg-icon icon="icon-team" class="icon-div" className="icon-svg" size="40px" bColor="#6c76f4" color="#FFFFFF"></svg-icon>
					</el-col>
				</el-row>
			</el-card>
		</el-col>
		<el-col :span="25">
			<el-card>
				<el-row>
					<el-col :span="20">
						<el-statistic :value="100">
							<template #title>
								<div style="display: inline-flex; align-items: center">
									试用期员工
									<el-icon style="margin-left: 4px" :size="12">
										<Male />
									</el-icon>
								</div>
							</template>
							<template #suffix> </template>
						</el-statistic>
					</el-col>
					<el-col :span="4" class="ico">
						<svg-icon icon="icon-team" class="icon-div" className="icon-svg" size="40px" bColor="#28d094" color="#FFFFFF"></svg-icon>
					</el-col>
				</el-row>
			</el-card>
		</el-col>
		<el-col :span="25">
			<el-card>
				<el-row>
					<el-col :span="20">
						<el-statistic :value="900">
							<template #title>
								<div style="display: inline-flex; align-items: center">
									转正员工
									<el-icon style="margin-left: 4px" :size="12">
										<Male />
									</el-icon>
								</div>
							</template>
							<template #suffix> </template>
						</el-statistic>
					</el-col>
					<el-col :span="4" class="ico">
						<svg-icon icon="icon-team" class="icon-div" className="icon-svg" size="40px" bColor="rgba(37, 97, 239, 1)" color="#FFFFFF"></svg-icon>
					</el-col>
				</el-row>
			</el-card>
		</el-col>
		<el-col :span="25">
			<el-card>
				<el-row>
					<el-col :span="20">
						<el-statistic :value="90">
							<template #title>
								<div style="display: inline-flex; align-items: center">
									待离职员工
									<el-icon style="margin-left: 4px" :size="12">
										<Male />
									</el-icon>
								</div>
							</template>
							<template #suffix> </template>
						</el-statistic>
					</el-col>
					<el-col :span="4" class="ico">
						<svg-icon icon="icon-team" class="icon-div" className="icon-svg" size="40px" bColor="#fddb78" color="#FFFFFF"></svg-icon>
					</el-col>
				</el-row>
			</el-card>
		</el-col>
		<el-col :span="25">
			<el-card>
				<el-row>
					<el-col :span="20">
						<el-statistic :value="70">
							<template #title>
								<div style="display: inline-flex; align-items: center">
									已离职员工
								</div>
							</template>
						</el-statistic>
					</el-col>
					<el-col :span="4" class="ico">
						<svg-icon icon="icon-team" class="icon-div" className="icon-svg" size="40px" bColor="#fa746b" color="#FFFFFF"></svg-icon>
					</el-col>
				</el-row>
			</el-card>
		</el-col>
	</el-row>
</template>

<style scoped>
:deep(.el-col-25) {
	width: 20%;
}

.ico {
	display: flex;
	justify-content: center;
	align-items: center;
	:deep(.icon-svg) {
		border-radius: 50%;
	}
}
</style>

<script setup lang="ts" name="profileTopIndex"></script>
